<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="referrer" content="no-referrer" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover"
    />

    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#121212" />
    <!-- favicon -->
    <link rel="icon" href="/favicon.ico" sizes="48x48" />
    <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
    <!-- FireFox -->
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />

    <title>Follow</title>

    <meta property="og:type" content="website" />
    <meta property="og:title" content="Follow" />
    <meta property="og:url" content="https://app.follow.is" />
    <meta property="og:image" content="https://app.follow.is/og-image.png" />
    <meta property="og:description" content="Your Self-custodial Feeds." />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Follow" />
    <meta name="twitter:image" content="https://app.follow.is/og-image.png" />
    <!-- Check Browser Script Inject -->

    <script>
      function setTheme() {
        let e = "follow:color-mode",
          t = document.documentElement,
          a = localStorage.getItem(e)
        function h() {
          return window.matchMedia
            ? window.matchMedia("(prefers-color-scheme: dark)").matches
              ? "dark"
              : window.matchMedia("(prefers-color-scheme: light)").matches
                ? "light"
                : void 0
            : void 0
        }
        if (!a) {
          t.dataset.theme = h() || "light"
          return
        }
        switch ((a = JSON.parse(a))) {
          case "dark":
            t.dataset.theme = "dark"
            break
          case "light":
            t.dataset.theme = "light"
            break
          case "system":
            t.dataset.theme = h() || "light"
        }
      }
      setTheme()
      // Can not get window.electron so check userAgent
      const isElectron = navigator.userAgent.includes("Electron")
      const isRN = window.__RN__
      document.documentElement.dataset.buildType = isRN ? "rn" : isElectron ? "electron" : "web"
    </script>
    <script>
      const isMobile = window.innerWidth < 1024
      document.documentElement.dataset.viewport = isMobile ? "mobile" : "desktop"
    </script>
  </head>
  <body>
    <div id="root"></div>

    <div id="app-skeleton" class="drag-region">
      <!-- Skeleton -->
      <style>
        [data-build-type]:not([data-build-type="electron"]) #root {
          background-color: hsl(var(--background));
        }
        html,
        body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
        #app-skeleton {
          position: fixed;
          inset: 0;
          z-index: 1000;
        }
        [data-viewport="mobile"] #app-skeleton {
          display: none;
        }
        [data-theme="light"] {
          --background: 0 0% 100%;
        }

        [data-theme="dark"] {
          --background: 0 0% 7.1%;
        }
        .skeleton {
          display: flex;
          height: 100%;
          width: 100%;
        }

        .sidebar {
          width: 16rem;
          flex-shrink: 0;
          height: 100%;
          background-color: hsl(var(--fo-native));
        }
        [data-build-type="electron"] .sidebar {
          background-color: hsl(var(--fo-native) / 0.3);
        }
        [data-build-type="electron"][data-theme="dark"] .sidebar {
          background-color: hsl(var(--fo-native) / 0.1);
        }
        .content {
          flex-grow: 1;
          width: 100%;
          height: 100%;
          background-color: hsl(var(--background));
        }

        [data-theme="light"] {
          --fo-native: 240 1.6% 87.6%;
        }
        [data-theme="dark"] {
          --fo-native: 30 1.7% 23.5%;
        }

        [data-build-type="web"] {
          --fo-native: 240 4.8% 95.9%;
        }

        [data-build-type="web"][data-theme="dark"] {
          --fo-native: 220 8.1% 14.5%;
        }
      </style>
      <div class="skeleton">
        <div class="sidebar"></div>
        <div class="content"></div>
      </div>
    </div>

    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
